<!doctype html>
<html> 
    <head> 
        <meta encoding="UTF-8"/>
        <style> 
            p label {  
                width: 180px;  
                float: left;  
                text-align: right;  
                padding-right: 10px  
            }
            table {  
                margin-left: 80px  
            }
            table td {  
                border-bottom: 1px solid #CCCCCC  
            }
            input.submit {  
                margin-left: 80px  
            }  
        </style> 
    </head> 
    <body> 
        <form action='/register' enctype="application/x-www-form+xml" method="post"> 
            <p> 
                <label for='name'>email</label> 
                <input name='name' required type='email' placeholder='input an email address'></input> 
            </p> 
            <p> 
                <label for='password'>password</label> 
                <input name='password' required type='password'></input> 
            </p> 
            <p> 
                <label for='birthday'>date</label> 
                <input type='date' name='birthday'/> 
            </p> 
            <p> 
                <label for='gender'>dropdown list</label> 
                <select name='country'>
                    <option value="1">China</option> 
                    <option value="2">Japan</option> 
                    <option value="3">Korea</option> 
                </select> 
            </p> 
            <p> 
                <label for='photo'>file</label> 
                <input type='file' name='photo' accept='image/*' /> 
            </p>
            <p> 
                <label for='color'>color</label> 
                <input type='color' name='color'/> 
            </p>
            <p> 
                <label for='search'>search</label> 
                <input type='search' name='search'/> 
            </p> 
            <p>
                <label for="slider">range</label>
                <input id="slider" type ="range" min ="100" max="500" step ="50" value ="100"/>
            </p>
            <table> 
                <thead> 
                    <td><button type="add" template="questionId"></button>question</td> 
                    <td>answer</td> 
                    <td></td>
                </thead>
                <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3"> 
                    <td><input type="text" name="questions[questionId].q"></td> 
                    <td><input type="text" name="questions[questionId].a"></td> 
                    <td><button type="remove">remove</button></td> 
                </tr> 
            </table> 
            <p> 
                <input type='submit' value='send' class='submit' />
            </p> 
        </form> 
    </body> 
</html> 